<script setup>
import { ref, useTemplateRef } from "vue";
import { ElNotification } from "element-plus";
import { addshop } from "@/utils/zqb-axios";
const { filterPet } = defineProps(["filterPet"]);

import { useCounterStore } from "@/stores/counter";
const stores = useCounterStore();
const { token } = stores;

const form = ref(
  filterPet || {
    name: "",
    description: "",
    category: "",
    brand: "",
    price: null,
    availability: "",
    goods: "",
    phone: "",
    site: "",
    coos: "",
  }
);
// 上传图片
const files = useTemplateRef("file");
const selectedImageUrl = ref(null);
const xxx = () => {
  files.value.click();
};

const handleFileChange = () => {
  const file = files.value.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (e) {
      selectedImageUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 提交表单数据
const onSubmit = () => {
  const time = new Date().toLocaleString()

  const {
    name,
    description,
    category,
    brand,
    price,
    availability,
    goods,
    phone,
    site,
    coos,
  } = form.value;

  // 验证表单是否填写完整
  if (
    !name ||
    !description ||
    !category ||
    !brand ||
    price === null ||
    !availability ||
    !goods ||
    !phone ||
    !site ||
    !coos ||
    !files.value.files[0]
  ) {
    ElNotification({
      title: "错误",
      message: "请填写所有的内容",
      type: "error",
    });
    return;
  }

  let formData = {
    name,
    description,
    category,
    brand,
    price,
    availability,
    goods,
    phone,
    time,
    site,
    coos,
    avatar: files.value.files[0], // 使用文件选择框的文件
  };

  addshop(formData).then((res) => {
    ElNotification({
      title: "添加成功",
      message: `成功添加 1 条数据`,
      type: "success",
    });
  });
  // console.log("addPet submit!", form.value);
};

// 重置表单
const formRef = ref(null);

const handleReset = () => {
  formRef.value.resetFields();
  selectedImageUrl.value = null; // 清空图片
};

const categories = ["狗类", "猫类", "小宠"];
</script>

<template>
  <el-form ref="formRef" :model="form" label-width="100rem" class="product-form">
    <!-- 商品名称 -->
    <el-form-item
      label="商品名称"
      prop="name"
      :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]"
    >
      <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
    </el-form-item>

    <!-- 商品描述 -->
    <el-form-item
      label="商品描述"
      prop="description"
      :rules="[{ required: true, message: '请输入商品描述', trigger: 'blur' }]"
    >
      <el-input
        type="textarea"
        v-model="form.description"
        placeholder="请输入商品描述"
        :rows="4"
      ></el-input>
    </el-form-item>

    <!-- 商品分类 -->
    <el-form-item
      label="商品分类"
      prop="category"
      :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]"
    >
      <el-select v-model="form.category" placeholder="请选择商品分类">
        <el-option
          v-for="category in categories"
          :key="category"
          :label="category"
          :value="category"
        ></el-option>
      </el-select>
    </el-form-item>



    <el-form-item
      label="商品类别"
      prop="coos"
      :rules="[{ required: true, message: '请输入商品类别', trigger: 'blur' }]"
    >
      <el-input v-model="form.coos" placeholder="请输入商品类别"></el-input>
    </el-form-item>

    <!-- 商品品牌（输入框）-->
    <el-form-item
      label="商品品牌"
      prop="brand"
      :rules="[{ required: true, message: '请输入商品品牌', trigger: 'blur' }]"
    >
      <el-input v-model="form.brand" placeholder="请输入商品品牌"></el-input>
    </el-form-item>

    <!-- 商品价格 -->
    <el-form-item
      label="商品价格"
      prop="price"
      :rules="[{ required: true, message: '请输入商品价格', trigger: 'blur' }]"
    >
      <el-input-number
        v-model="form.price"
        :min="0"
        :step="1"
        placeholder="请输入价格"
        style="width: 300rem"
      ></el-input-number>
    </el-form-item>

    <!-- 商品库存状态（输入框）-->
    <el-form-item
      label="库存数量"
      prop="availability"
      :rules="[{ required: true, message: '请输入库存数量', trigger: 'blur' }]"
    >
      <el-input v-model="form.availability" placeholder="请输入库存数量"></el-input>
    </el-form-item>

    <!-- 商品详情 -->
    <el-form-item
      label="商品重量"
      prop="goods"
      :rules="[{ required: true, message: '请输入商品重量', trigger: 'blur' }]"
    >
      <el-input v-model="form.goods" placeholder="请输入商品重量"></el-input>
    </el-form-item>

    <!-- 联系电话 -->
    <el-form-item
      label="联系电话"
      prop="phone"
      :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]"
    >
      <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
    </el-form-item>

    <el-form-item
      label="商品产地"
      prop="site"
      :rules="[{ required: true, message: '请输入产地', trigger: 'blur' }]"
    >
      <el-input v-model="form.site" placeholder="请输入产地"></el-input>
    </el-form-item>

    <el-row>
      <div class="upload" @click="xxx">
        <img v-if="selectedImageUrl" :src="selectedImageUrl" alt="Selected Image" />
        <img v-else-if="!filterPet" src="@/assets/upload.png" alt="" />
        <img v-else :src="`http://localhost:3000/${filterPet?.avatarName}`" alt="" />
        <input
          type="file"
          name="file"
          ref="file"
          style="display: none"
          @change="handleFileChange"
        />
      </div>
    </el-row>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="less" scoped>


.product-form {
  max-width: 800rem;
  margin: 0 auto;
  padding: 10rem;
  background-color: #fff;
  box-shadow: 0 2rem 12rem rgba(0, 0, 0, 0.1);
  border-radius: 8rem;
}



.el-form-item label {
  color: #333;
}

.el-input,
.el-input-number,
.el-select {
  border-radius: 4rem;
  border: 1rem solid #dcdfe6;
}

.el-input:focus,
.el-input-number:focus,
.el-select:focus {
  border-color: #409eff;
  box-shadow: 0 0 5rem rgba(64, 158, 255, 0.3);
}

.el-button {
  font-size: 14rem;
  font-weight: 500;
  padding: 10rem 20rem;
  border-radius: 4rem;
  border: none;
}

.el-button[type="primary"] {
  background-color: #409eff;
  color: white;
}

.el-button[type="primary"]:hover {
  background-color: #66b1ff;
}

.upload {
  cursor: pointer;
  border-radius: 8rem;
  padding: 10rem;
  width: 100%;
  padding-left: 100rem;
}

.upload img {
  width: 300rem;
  height: 90rem;
  object-fit: contain;
  border-radius: 4rem;
}

.upload input[type="file"] {
  display: none;
}

.upload img {
  transition: all 0.3s ease;
}

.upload:hover img {
  opacity: 0.8;
}

.el-row {
  display: flex;
  justify-content: center;
}

.el-form-item .el-input,
.el-form-item .el-select {
  max-width: 400rem;
}

.el-form-item .el-input-number {
  max-width: 200rem;
}
</style>

